import Vue from 'vue'
import './style.less'
const Indicator = Vue.extend({
  template: `<transition name="app-indicator">
    <div class="app-indicator" v-show="visible">
      <div class="app-indicator-wrapper" :style="{ 'padding': text ? '20px' : '15px' }">
        <van-loading type="spinner" />
        <span class="app-indicator-text" v-show="text">{{ text }}</span>
      </div>
      <div class="app-indicator-mask" @touchmove.stop.prevent></div>
    </div>
  </transition>`,
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false
    };
  },
});
let instance;
export default {
  open(options = {}) {
    if (!instance) {
      instance = new Indicator({
        el: document.createElement('div')
      });
    }
    if (instance.visible) return;
    instance.text = typeof options === 'string' ? options : options.text || '';
    // instance.spinnerType = options.spinnerType || 'snake';
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => {
      instance.visible = true;
    });
  },

  close() {
    if (instance) {
      instance.visible = false;
    }
  }
};
